<!DOCTYPE html "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">


<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="signupForm">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">商品名称：</label>
                            <div class="col-sm-10">
                                <input id="productName" name="productName" class="form-control" type="text" placeholder=""  th:value="${productInfo.productName}" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">商品简介(描述)：</label>
                            <div class="col-sm-10">
                                <input id="productDesc" name="productDesc"
                                       class="form-control" type="text"   th:value="${productInfo.productDesc}" readonly>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">主图一：</label>
                        </div>
                        <div class="form-group" id="cardDiv2" v-if="frontPicUrlDataURL">
                            <div class="col-sm-8 col-sm-offset-3">
                                <img th:src="${productInfo.frontPicUrl}" alt="商品图片" class="img-responsive img-thumbnail"
                                     style="height: 80px;width: 120px"  onclick="showMaxImg(this)">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">主图二：</label>
                        </div>
                        <div class="form-group"  v-if="frontPicUrlDataURL">
                            <div class="col-sm-8 col-sm-offset-3">
                                <img th:src="${productInfo.frontPicUrlOne}" alt="主图二" class="img-responsive img-thumbnail"
                                     style="height: 80px;width: 120px"  onclick="showMaxImg(this)">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">主图三：</label>
                        </div>
                        <div class="form-group" v-if="frontPicUrlDataURL">
                            <div class="col-sm-8 col-sm-offset-3">
                                <img th:src="${productInfo.frontPicUrlTwo}" alt="主图三" class="img-responsive img-thumbnail"
                                     style="height: 80px;width: 120px"  onclick="showMaxImg(this)">
                            </div>
                        </div>

                        <div class="form-group" th:if="${productInfo.videoUrl} != null">
                            <label class="col-sm-2 control-label">视频：</label>
                        </div>
                        <div class="form-group" th:if="${productInfo.videoUrl} != null">
                            <div class="col-sm-10 col-sm-offset-3">
                                <button id="Modal" type="button" class="btn btn-primary" data-toggle="modal"
                                        data-target="#roleModal" style="width:80px;height:36px;">查看视频
                                </button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">所属分类</label>
                            <div class="col-sm-10">
                                <input id="className" name="className" class="form-control" type="text"
                                       style="cursor: pointer;" th:value="${productInfo.className}"
                                       readonly="readonly" placeholder="所属分类" >
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">原价：</label>
                            <div class="col-sm-4">
                                <input type="text" id="originalPrice" name="originalPrice" data-placeholder="原价" class="form-control" maxlength="8"
                                       th:value="${productInfo.originalPrice}" readonly="readonly">
                            </div>
                            <label class="col-sm-2 control-label">现价：</label>
                            <div class="col-sm-4">
                                <input type="text" id="price" name="price" th:value="${productInfo.price}"
                                       data-placeholder="现价" class="form-control" maxlength="8"   readonly="readonly">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">月销量：</label>
                            <div class="col-sm-4">
                                <input type="text" id="monthSales" name="monthSales" data-placeholder="月销量" class="form-control" maxlength="8"
                                       th:value="${productInfo.monthSales}" readonly="readonly">
                            </div>
                            <label class="col-sm-2 control-label">实际销量：</label>
                            <div class="col-sm-4">
                                <input type="text" id="actSales" name="actSales" th:value="${productInfo.actSales}"
                                       data-placeholder="实际销量" class="form-control" maxlength="8"   readonly="readonly">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">销量：</label>
                            <div class="col-sm-10">
                                <input id="sales" name="sales"
                                       class="form-control" type="number"  maxlength="7" th:value="${productInfo.sales}" readonly="readonly">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">状态:</label>
                            <div class="col-sm-8">
                                <label class="radio-inline">
                                    <input type="radio" name="productStatus" value="1"   th:field="*{productInfo.productStatus}" disabled/>上架
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="productStatus" value="0"   th:field="*{productInfo.productStatus}" disabled/>下架
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">商品标签:</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="productTagId" th:field="*{productInfo.productTagId}" value="1"  checked/>热卖
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="productTagId" th:field="*{productInfo.productTagId}" value="2"  />推荐
                                </label>
                            </div>
                        </div>

                        <!-- 颜色 -->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">颜色属性:</label>
                            <div class="col-sm-10 ">
                                <label th:each="color,colorStat : ${colorList}" class="checkbox-inline">
                                    <input name="colorIds[]" type="checkbox" th:value="${color.colorId}"
                                           th:text="${color.colorName}" checked="checked" disabled="disabled">
                                </label>
                            </div>
                        </div>

                        <!-- 规格 -->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">规格:</label>
                            <div class="col-sm-10">
                                <label th:each="specs,specsStat : ${specsList}" class="checkbox-inline">
                                    <input name="specsIds[]" type="checkbox"  th:value="${specs.specsId}"
                                           th:text="${specs.specsName}" checked="checked" disabled="disabled">
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">排序：</label>
                            <div class="col-sm-10">
                                <input id="orderNum" name="orderNum" th:value="${productInfo.orderNum}"
                                       class="form-control" type="text" readonly="readonly">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">售后方式:</label>
                            <div class="col-sm-10">
                                <select id="afterSaleType" name="afterSaleType" th:field="${productInfo.afterSaleType}"
                                        data-placeholder="售后方式" class="form-control chosen-select"  disabled="disabled"   >
                                    <option value="1">7天无理由退换货</option>
                                    <option value="2">30天无理由退换货</option>
                                    <option value="3">不支持退换货</option>
                                </select>
                            </div>
                        </div>


                        <div class="form-group">
                            <input id="productDtl" name="productDtl" type="hidden" class="form-control" th:value="${productInfo.productDtl}">
                            <label class="col-sm-2 control-label">商品详情：</label>
                            <div class="col-sm-9">
                                <div class="ibox-content no-padding">
                                    <div id="content_sn" class="summernote" ></div>
                                </div>
                            </div>
                        </div>
                        <div class="modal fade bs-example-modal-lg text-center" id="imgModal" tabindex="-1" role="dialog" data-toggle="modal" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-lg" style="display:inline-block;width:auto;">
                                <div class="modal-content">
                                    <div id="imgshow"></div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 修改用户角色模态框（Modal） -->
<div class="modal fade" id="roleModal" tabindex="-2" role="dialog" aria-labelledby="editRoleLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
                    <video id="my-video" class="video-js" controls preload="auto" width="760" height="400"
                           th:poster="${productInfo.picUrl}"  data-setup="{}">
                        <!--<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">-->
                        <source th:src="${productInfo.videoUrl}" type="video/mp4">
                    </video>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<div th:include="include::footer"></div>
<script th:inline="javascript">
    $().ready(function () {
        getInfo();
    });

    // 图片放大
    function showMaxImg(obj){
        var src=$(obj).attr("src");
        $("#imgModal").find("#imgshow").html("<img src='"+src+"' class='carousel-inner img-responsive img-rounded' data-dismiss='modal'>");
        $("#imgModal").modal('show');
    }

    function getInfo() {
        $('.summernote').summernote({
            height: '320px',
            lang: 'zh-CN',
            callbacks: {
                onImageUpload: function (files, editor, $editable) {
                    sendFile(files);
                }
            }
        });
        $('#content_sn').summernote('code', $('#productDtl').val());
    }
</script>
<script type="text/javascript" src="/js/appjs/app/product/video.js"></script>
</body>
</html>